<template>
  <div class="box">
    <!-- 工作日使用率 -->
    <div>
      <PublicTop :index="0" />
    </div>
    <div>
      <dv-active-ring-chart :config="config" style="width: 2.5rem; height: 2.5rem" />
    </div>
    <div class="text">
      <div class="top flex">
        <div class="left">
          <div class="topText">
            <animate-number from="0" :to="fieldObj.dayCount || 0" :key="fieldObj.dayCount || 0"
              class="number"></animate-number>
          </div>
          <div class="bomText">当日台次</div>
        </div>
        <div class="left">
          <div class="topText">
            <animate-number from="0" :to="fieldObj.monthCount || 0" :key="fieldObj.monthCount || 0"
              class="number"></animate-number>
          </div>
          <div class="bomText">本月台次</div>
        </div>
      </div>
      <div class="bom flex">
        <div class="left">
          <div class="topText">
            <animate-number from="0" :to="fieldObj.totalCount || 0" :key="fieldObj.totalCount || 0"
              class="number"></animate-number>
          </div>
          <div class="bomText">累计台次</div>
        </div>
        <div class="left">
          <div class="topText">
            <animate-number from="0" :to="fieldObj.dayRate || 0"
              :key="fieldObj.dayRate || 0" class="number"></animate-number>
            %
          </div>
          <div class="bomText">当日使用率</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PublicTop from "./../publicTop/index.vue";
import { getGetCarRentedRate } from "@/api/dataV/index";
import { mapState } from 'vuex';
export default {
  name: "BoxView",
  components: { PublicTop },
  data() {
    return {
      config: {},
      //fieldObj: {},
      trme: null,
    };
  },
  watch: {
    "$store.state.fieldObj": {
      handler: function (o) {
        this.option = o;
      },
    },
  },
  beforeDestroy() {
    clearInterval(this.trme);
  },
  computed:{
    ...mapState(['fieldObj'])
  },
  mounted() {
    window.addEventListener("resize", this.resizeView);
    // const store = this.$store.state.fieldObj;
    // if (JSON.stringify(store) !== "{}") {
    //   this.fieldObj = store;
    // }
    this.init();
  },
  methods: {
    init() {
      this.query();
      this.trme = setInterval(() => this.query(), 10000);
    },
    resizeView() {
      setTimeout(() => {
        this.query();
      }, 500);
    },
    query() {
      getGetCarRentedRate().then((res) => {
        const arr = res.map((v) => {
          return {
            value: v.value,
            name: "",
          };
        });
        this.valueArr = arr;
        this.config = {
          data: arr,
          radius: "40%",
          lineWidth: 10,
          digitalFlopStyle: {
            top: "-40px",
            color: "red",
          },
        };
      });
    },
  },
};
</script>
<style></style>
<style lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: url(@/assets/datav/itembg.png) no-repeat;
  position: relative;

  .flex {
    display: flex;
  }

  .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5rem;
    background: rgba(0, 123, 255, 0.1);

    .left {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 0.7rem;
      text-align: center;
      justify-content: center;
      align-items: center;
      font-weight: normal;
      font-family: "Microsoft Yahei", Arial, "sans-serif";
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: visible;

      .topText {
        color: #fff;
        font-size: 0.3rem;
      }

      .bomText {
        color: rgb(30, 255, 255);
        font-size: 0.15rem;
      }
    }
  }
}
</style>
